<template>
    <div>
        <breadcrumb :title="'需求申请列表'" :noBack="true"></breadcrumb>
        <div class="white-block box" v-loading="loading">
            <div class="toolbar">
                <el-input v-model="orderNo" placeholder="输入申请单号" class="input mr10"></el-input>
                <el-input v-model="resName" placeholder="输入资源名称" class="input mr10"></el-input>
                <el-select v-model="state" placeholder="选择状态" class="mr10">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="primary no-radius" @click="getList()">查询</el-button>
                <el-button class="minor no-radius" @click="reset()">重置</el-button>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="userName" slot-scope="scope">
                    <span>{{scope.row.userName}}</span>
                    <div v-if="scope.row.deptName">
                        <el-button class="primary limit text" size="small">{{scope.row.deptName}}</el-button>
                    </div>
                </template>
                <!--<template slot="resNameList" slot-scope="scope">-->
                <!--<p v-for="(list,index) in scope.row.resNameList" :key="index">{{list}}</p>-->
                <!--</template>-->
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false" v-if="scope.row.state!=5&&scope.row.state!=6"
                             class="mr10" @click="openEdit(scope.row)">修改
                    </el-link>
                    <el-link type="primary" :underline="false"
                             class="mr10"
                             @click="openDetail(scope.row)">查看
                    </el-link>
                    <el-link type="primary" :underline="false"
                             v-if="scope.row.state==2||scope.row.state==3||scope.row.state==4"
                             @click="cancelList(scope.row)">取消
                    </el-link>
                </template>
                <template slot="state" slot-scope="scope">
                    <span v-if="scope.row.state==2||scope.row.state==3">待审核</span>
                    <span v-else-if="scope.row.state==4">审核中</span>
                    <span v-else-if="scope.row.state==5">已取消</span>
                    <span v-else-if="scope.row.state==6">审核通过</span>
                    <span v-else-if="scope.row.state==7" class="error">审核不通过</span>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page"></page>
        </div>
        <transition name="slide">
            <router-view @upload="getList"></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {

        data() {
            return {
                options: [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '待审核',
                        value: 2
                    },
                    {
                        label: '审核中',
                        value: 4
                    },
                    {
                        label: '已取消',
                        value: 5
                    },
                    {
                        label: '审核通过',
                        value: 6
                    },
                    {
                        label: '审核不通过',
                        value: 7
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'orderNo',
                        label: '申请单号',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'userName',
                        label: '申请人',
                        minWidth: '15%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'contactTel',
                        label: '联系方式',
                        minWidth: '15%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '申请日期',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        width: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '25%'
                    }
                ],
                slotColumns: ['operation', 'userName', 'state'],
                data: {},
                loading: false,
                index: 1,
                resName: '',
                orderNo: '',
                state: '',
                show: false
            }
        },
        mounted() {
            if (this.$route.query.orderNo) this.orderNo = this.$route.query.orderNo
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                // this.$http.get('/dept/workbench/pageOrder', {
                this.$http.get('/dept/workbench/getUserOrderList', {
                    current: this.index || 1,
                    size: 10,
                    orderNo: this.orderNo,
                    resName: this.resName,
                    state: this.state
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records || []
                        this.data = result.data
                        delete this.data['records']
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.orderNo = ''
                this.resName = ''
                this.state = ''
                this.getList(1)
            },
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        itemId: row.itemId,
                        orderNo: row.orderNo
                    }
                })
            },
            openEdit(row) {
                this.$router.push({
                    path: this.$route.path + '/edit',
                    query: {
                        itemId: row.itemId,
                        orderNo: row.orderNo
                    }
                })
            },
            cancelList(row) {
                this.loading = true
                this.$http.post('/dept/workbench/revoke', {
                    orderNo: row.orderNo,
                    itemId: row.itemId
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        row.state = 5
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page
        }
    }
</script>

<style scoped lang="less">
    .box {
        .input {
            width: 2.8rem;
            height: 0.5rem;
            line-height: 0.5rem;
        }

        .button {
            border: none;
            background-color: #fff;
            color: #1497fc;
        }

        .page {
            margin-top: 1.11rem;
            right: 0.3rem;
            bottom: 1.14rem;
        }
    }
</style>
